import React from 'react';
import { TabBar } from 'antd-mobile';
import { useHistory, useLocation } from 'react-router-dom'

const icon = (iconUrl) => (
  <div style={{
    width: '22px',
    height: '22px',
    background: `url(${iconUrl}) center center /  21px 21px no-repeat`
  }}
  />
)


const Tabbar = (props) => {
  let location = useLocation();
  let history = useHistory();
  const { pathname } = location;
  let orderPathname
  if (pathname.match(/order\/\d*/)) {
    orderPathname = '/order/0'
  } else {
    orderPathname = null
  }

  const tabbarPathname = [
    '/', '/purchaseOrder/0', orderPathname, '/profile'
  ]

  const isHidden = tabbarPathname.find(item => item === pathname) ? true : false

  return (
    <>
      { isHidden && <div className="global-tabbar global-bottom-fixed" >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#FF762E"
          barTintColor="white"
          hidden={false}
        >

          <TabBar.Item
            title="首页"
            key="hoem"
            icon={icon('https://res.lexiangpingou.cn/images/826/2020/09/WNU3e49BbRnK0mUNXVEN3J4fGjF44I.png')}
            selectedIcon={icon('https://res.lexiangpingou.cn/images/826/2020/09/cBLQkOZa8L1LyxbQZMqYkXaYLq86x8.png')}
            selected={pathname === '/'}
            onPress={() => {
              history.replace('/')
            }}
            data-seed="logId"
          >

          </TabBar.Item>
          <TabBar.Item
            title="采购需求"
            key="hoem"
            icon={icon('https://res.lexiangpingou.cn/images/826/2020/10/rPh29UHPhKSG525c5h7Ks5hQ6pt5T7.png')}
            selectedIcon={icon('https://res.lexiangpingou.cn/images/826/2020/10/t8OwwLaBoOaAbbIAl81bPsZlBn8Mjn.png')}
            selected={pathname === '/purchaseOrder/0'}
            onPress={() => {
              history.replace('/purchaseOrder/0')
            }}
            data-seed="logId"
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              icon('https://res.lexiangpingou.cn/images/826/2020/09/R855y4N4b1P5ifpGzqn1yZ81ipFGrQ.png')
            }
            selectedIcon={
              icon('https://res.lexiangpingou.cn/images/826/2020/09/xsA08j0ji7IB1115jILJfx182xbI4Z.png')
            }
            title="采购订单"
            key="order"
            badge={false}
            selected={orderPathname === '/order/0'}
            onPress={() => {
              history.replace('/order/0')
            }}
            data-seed="logId1"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              icon('https://res.lexiangpingou.cn/images/826/2020/09/A0rNggkusK4sFMSiFNigF4viLGsg5G.png')
            }
            selectedIcon={
              icon('https://res.lexiangpingou.cn/images/826/2020/09/YWcC334O023YwY3yWyJ0Vm0tZ3VCGo.png')
            }
            title="个人中心"
            key="profile"
            selected={pathname === '/profile'}
            onPress={() => {
              history.replace('/profile')
            }}
          >
          </TabBar.Item>
        </TabBar>
      </div>}
    </>
  );
}

export default Tabbar
